import "./index.scss"
import {useEffect, useRef} from "react";
// 规定大小值为特定的
type sizeType = "small" | "default" | "large";
// 规定样式
type styleType = "round" | "frame";

// 规定
interface Props {
    // 加载文案
    title?: string,
    // 加载大小，small、default、large
    size?: sizeType,
    // 加载中的状态
    state?: boolean,
    // 类型： round 圆 frame边框
    styleType?: styleType
}

// 加载选项
const Loding = (props: Props) => {
    const {title = "加载中", state = true, size = "default", styleType = "round"} = props;
    // canvas 实例
    const canvasEle = useRef<HTMLCanvasElement>(null);

    // 获取大小
    useEffect(() => {
        if (canvasEle.current) {
            const ele = canvasEle.current as HTMLCanvasElement;
            const width = Number(ele?.clientWidth);
            ele.width = width;
            ele.height = width;
            const ctx = canvasEle.current?.getContext("2d") as CanvasRenderingContext2D;
            // x轴起点
            const x = width / 2;
            const y = width / 2;
            const r = width / 2;
            // x起始点，y结束点，开始起始角值，结束起始角，以顺时针方式画
            ctx.arc(x + 1, y + 1, r, 0.65 * Math.PI, 1.45 * Math.PI, false);
            ctx.strokeStyle = "#1677ff";
            ctx.lineWidth = 2;
            ctx.stroke();
        }

    }, [canvasEle])

    return (
        <div className={state ? 'loding_box' : 'loding_none'}>
            {
                styleType === 'round' ? (
                    <div className={size + ' round_style'}>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </div>
                ) : (
                    <div className={size + ' frame_style'}>
                        <canvas ref={canvasEle}></canvas>
                    </div>
                )
            }
            <p className="loading_title">{title}</p>
        </div>
    )
}

export default Loding;
